<template>
    <v-layout style="justify-content: center;align-content: center;">
        <v-sheet color="blue-grey-lighten-5" width="500"
            style="padding: 5%; align-items: center; justify-content: center;margin-top: 3%;">
            <v-text-field disabled label="当前邮箱" variant="solo" v-model="useUserStore().account" density="comfortable">
            </v-text-field>
            <v-text-field label="新邮箱" variant="solo" v-model="newMail" density="comfortable"
                :rules="[rules.required, rules.verifyEmail]" type="text">
            </v-text-field>
            <div style="display: flex;">
                <v-text-field v-model="code" label="验证码" style="margin-right: 4%;width: 50%;" maxlength="6"
                    density="comfortable" variant="solo">
                </v-text-field>
                <v-btn variant="elevated" v-if="waitTime == 0" color="light-blue-accent-3" style="margin-top: 1.5%;"
                    @click="sendMailVerificationCode">
                    发送验证码
                </v-btn>
                <v-btn variant="elevated" :disabled="true" v-else style="margin-top: 1.5%;">
                    {{ waitTime }}s
                </v-btn>
            </div>
            <div style="width: 100%;align-items: center; justify-content: center;display: flex;margin-top: 5%;">
                <v-btn color="light-blue-accent-3" :loading="isLoading" @click="updateMail">
                    改绑
                </v-btn>
                <v-dialog v-model="isShow" width="400" persistent>
                    <template v-slot:default>
                        <v-card height="120" title="重置成功!">
                            <template v-slot:prepend>
                                <v-icon color="green">
                                    mdi-check-circle
                                </v-icon>
                            </template>
                            <v-card-text style="font-size: x-large;">
                                {{ time }}秒后自动跳转
                            </v-card-text>
                        </v-card>
                    </template>
                </v-dialog>
            </div>
        </v-sheet>
    </v-layout>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores';
import { message } from '@/utils/message';
import { verifyEmail } from '@/utils/verification';
import { SendMailVerificationCode } from '@/controllers/authController';
import { UpdateMail } from '@/controllers/userController'
import { ref } from 'vue'
import router from '@/router';
let newMail = ref('')
let code = ref('')
let waitTime = ref(0)
let isLoading = ref(false)
let isShow = ref(false)
let time = ref(3)
const rules = {
    required: (value: any) => !!value || '此项必填',
    verifyEmail: (value: any) => verifyEmail(value) || '邮箱格式不正确',
}
function countdown() {
    if (time.value > 0) {
        time.value--
        setTimeout(countdown, 1000)
    }
}
async function sendMailVerificationCode() {
    if (newMail.value === '' || !verifyEmail(newMail.value)) {
        message('邮箱格式不正确')
        return
    }
    try {
        await SendMailVerificationCode(newMail.value, false)
        message('验证码发送成功', 'success')
        time.value = 60
        countdown()
    }
    catch (error: any) {
        message(error.message, 'error')
    }
}
async function updateMail() {
    if (newMail.value === '' || !verifyEmail(newMail.value)) {
        message('邮箱格式不正确')
        return
    }
    if (code.value === '') {
        message('验证码不能为空！')
        return
    }
    isLoading.value = true
    try {
        await UpdateMail(newMail.value, code.value)
        isShow.value = true
        let intervalId = setInterval(() => {
            time.value--
            if (time.value == 0) {
                clearInterval(intervalId)
                useUserStore().logout()
                router.push('/login')
            }
        }, 1000)
    }
    catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}
</script>